<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑图书</title>
    <script src="../js/vue.js"></script>
    <!--    基于 promise 技术的 专门用于 Ajax 调用的js-->
    <script src="../js/axios.min.js"></script>
    <style>
        label{
            display: inline-block;
            width:200px;
            text-align: right;
        }
    </style>
</head>
<body>

<div id="app">
<label>编号</label><input v-model="book.id"><br>
<label>书名</label><input v-model="book.bookname"><br>
<label>出版社</label><input v-model="book.bookpress"><br>
<label>出版日期</label><input v-model="book.pressdate"><br>
<label>作者</label><input v-model="book.bookauthor"><br>
<label>库存</label><input v-model="book.bookcount"><br>
<label></label><button @click="save">库存</button>
</div>

</body>
<script>
    var vue = new Vue({
        el : "#app",
        data : {
            book : {

            },
        },
        // 当 vue 对象创建好之后，立即执行的代码
        created (){
            // JS BOM 地址对象 #??
            var id = location.hash.substring(1);
            axios({
               url : "../../GetBookServlet",
                params : {
                   id : id
                }
            }).then( res => {
                //axios 方法会自动转json 对象 JSON.parse()
                this.book = res.data;
            });

        },
        methods : {
            save(){
                axios({
                    url : "../../SaveBookServlet",
                    params : this.book
                }).then( res=>{
                   alert(res.data);
                });
            }

        }
    });
</script>
</html>